<template>
    <div class="base-one">
        BaseOne
    </div>
</template>

<script>
export default {}
</script>

<style scoped>
/*
1.默认的 style 样式，会作用到全局
2.加上 scoped 之后，只会作用到局部
-------------------------------
scoped 原理：
1.给当前组件模板的所有元素，都会添加一个自定义属性：data-v-hash值(data-v-5f6a9d56)
    利用hash值区分不同的组件，有相同的hash值的说明在同一组件
2.css 选择器后面，被自动处理，添加上了属性选择器：div[data-v-5f6a9d56]
*/
div {
    border: 3px solid blue;
    margin: 30px;
}
</style>